import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

function url(name) {
  return () => import(`../views/${name}.vue`)
}
const View = url('View')
const Date = url('date')
const cascader = url('cascader')
const form = url('form')
const list = url('list')
const page = url('page')
const index = url('index')
import text from '../views/text.vue'
Vue.use(VueRouter)

const routes = [{
  path: '/',
  component: index,
  children: [
    {
      path: '/',
      component: form,
      children: [
        {
          path: '/',
          component: text}
      ]
    },
    {
      path: '/Home',
      component: Home
    },
    {
      path: '/list',
      component: list
    },
    {
      path: '/page',
      component: page
    },
    {
      path: '/view',
      component: View
    },
    {
      path: '/date',
      component: Date,
      children: [{
        path: '/',
        component: cascader
      }]
    },
    {
      path: '/about',
      name: 'About',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
    }
  ]
}]

const router = new VueRouter({
  routes,
  mode: 'history'
})

export default router